export default function rightTop(){
    var canvas_rightTop = document.getElementById('heter-rightTop');
    var rightTop_w = canvas_rightTop.clientWidth;
    var rightTop_h = canvas_rightTop.clientHeight;
    var ctx_rightTop = canvas_rightTop.getContext('2d');
    canvas_rightTop.width = rightTop_w;
    canvas_rightTop.height = rightTop_h;
    ctx_rightTop.width = rightTop_w;
    ctx_rightTop.height = rightTop_h;
    ctx_rightTop.fillStyle = 'rgba(0,0,0,0)';
    ctx_rightTop.fillRect(0, 0, rightTop_w, rightTop_h);
    var rightTop_px = 0, rightTop_py = 0, rightTop_dx = 1, rightTop_dy = 0;
    var steep_x = 4, steep_y = 4;
    var turning_x = rightTop_w - 40, turning_y = 40;
    function draw_rightTop() {
        ctx_rightTop.save();
        ctx_rightTop.fillStyle = 'rgba(1,15,75,0.1)';
        ctx_rightTop.moveTo(0, 0);
        ctx_rightTop.lineTo(turning_x, 0);
        ctx_rightTop.lineTo(rightTop_w, 40);
        ctx_rightTop.lineTo(rightTop_w, rightTop_h);
        ctx_rightTop.lineTo(0, rightTop_h);
        ctx_rightTop.lineTo(0, 0);
        ctx_rightTop.fill();
        ctx_rightTop.restore();
        ctx_rightTop.save();
        ctx_rightTop.fillStyle = 'rgba(255,215,0,1)';
        ctx_rightTop.fillRect(rightTop_px, rightTop_py, 4, 4);
        ctx_rightTop.restore();
        if (rightTop_dx * rightTop_dy != 0) {
            rightTop_px += rightTop_dx * 2;
            rightTop_py += rightTop_dy * 2;
        } else {
            rightTop_px += rightTop_dx * steep_x;
            rightTop_py += rightTop_dy * steep_y;
        }


        if (rightTop_px >= turning_x - 4 && rightTop_py == 0) {
            rightTop_px = turning_x - 4;
            rightTop_dx = 1;
            rightTop_dy = 1;
        }
        if (rightTop_px >= rightTop_w - 4 && rightTop_py <= rightTop_h - 4) {
            rightTop_px = rightTop_w - 4;
            rightTop_dx = 0;
            rightTop_dy = 1;
        }
        if (rightTop_px == rightTop_w - 4 && rightTop_py >= rightTop_h) {
            rightTop_py = rightTop_h - 4;
            rightTop_dx = -1;
            rightTop_dy = 0;
        }
        if (rightTop_py == rightTop_h - 4 && rightTop_px <= 0) {
            rightTop_px = 0;
            rightTop_dx = 0;
            rightTop_dy = -1;
        }
        if (rightTop_py <= 0 && rightTop_px == 0) {
            rightTop_py = 0;
            rightTop_dx = 1;
            rightTop_dy = 0;
        }
        requestAnimationFrame(draw_rightTop);
    };
    draw_rightTop()
}